<section id="events-section">
  <div class="d-flex flew-row align-items-center justify-content-between">
    <h1 class="font-weight-light" id="events-title">
      {{ 'sidebar.nav.EVENT' | translate }}
    </h1>
    <div class="d-flex align-items-center justify-content-end">
      <ng-container *ngIf="!error">
        <button
          mat-button
          aria-label="Export events CSV"
          type="button"
          *ngIf="events.length > 0"
          (click)="eventsGrid.exportCSV()">
          <i class="eos-icons icon-18">csv_file</i>
        </button>
      </ng-container>
      <app-loading-button
        (btnClick)="refresh()"
        [appearance]="'mat-button'"
        [buttonClasses]="'d-flex justify-content-center align-items-center'"
        [disabled]="!!(refreshing$ | async)"
        [iconClasses]="'eos-icons icon-18'"
        [iconName]="'refresh'"
        [id]="'events-refresh-button'"
        [loading]="!!(refreshing$ | async)"
        [text]="'network.REFRESH' | translate"
        [type]="'button'">
      </app-loading-button>
    </div>
  </div>
  <mat-card *ngIf="loaded; else loadingOrErrorTemplate">
    <app-events-grid [gridHeight]="480"></app-events-grid>
  </mat-card>
  <ng-template #loadingOrErrorTemplate>
    <ng-container *ngIf="error; else loadingTemplate">
      <mat-card>
        {{ error | json }}
      </mat-card>
    </ng-container>
    <ng-template #loadingTemplate>
      <app-loading-template></app-loading-template>
    </ng-template>
  </ng-template>
</section>
